<div>
    <!-- 面包屑 -->
    <div class="widewrapper subheader">
        <div class="container">
            <div class="clean-breadcrumb">
                <a [routerLink]="['/index/post']">Blog</a>
                <span class="separator">&#x2F;</span>
                <a>Detail</a>
            </div>
        </div>
    </div>
    <!-- end -->
    
    <div class="widewrapper main">
        <div class="container">
            <div class="row">
                <div class="col-md-8 blog-main">
                    <article class="blog-post">
                        <header>
                            <div class="lead-image">
                                <img src="/assets/img/single-post.jpg" alt="" class="img-responsive">
                            </div>
                        </header>
                        <div class="body">
                            <h1>{{article.title}}</h1>
                            <div class="meta">
                                <i class="fa fa-user"></i> {{article.creatorUserName}}
                                <i class="fa fa-calendar"></i>{{article.publishedTime| momentFormat:'L'}}
                                <i class="fa fa-comments"></i>
                                <span class="data">
                                    <a href="#comments">{{article.commentnum}} Comments</a>
                                </span>
                            </div>
                            <div [innerHtml]="article.content"></div>
                            <!-- {{article.content}} -->
                        </div>
                    </article>

                    <aside class="comments" id="comments">
                        <hr>

                        <h2>
                            <i class="fa fa-comments"></i> {{article.commentnum}} Comments</h2>

                        <article class="comment" *ngFor="let item of comments">
                            <header class="clearfix">
                                <img src="/assets/img/avatar.png" alt="A Smart Guy" class="avatar">
                                <div class="meta">
                                    <h3>
                                        <a href="#">{{item.userName}}</a>
                                    </h3>
                                    <span class="date">
                                        {{item.creattionTime}}
                                    </span>
                                    <span class="separator">
                                        -
                                    </span>

                                    <a href="#create-comment" class="reply-link">Reply</a>
                                </div>
                            </header>
                            <div class="body">
                                {{item.comment}}
                            </div>
                        </article>

                    </aside>

                    <aside class="create-comment" id="create-comment">
                        <hr>
                        <h2>
                            <i class="fa fa-pencil"></i> 添加评论</h2>

                        <form action="#" method="get" accept-charset="utf-8">
                            <!-- <div class="row">
                <div class="col-md-6">
                  <input type="text" name="name" id="comment-name" placeholder="Your Name" class="form-control input-lg">
                </div>
                <div class="col-md-6">
                  <input type="email" name="email" id="comment-email" placeholder="Email" class="form-control input-lg">
                </div>
              </div> -->

                            <!-- <input type="url" name="name" id="comment-url" placeholder="Website" class="form-control input-lg"> -->

                            <textarea rows="10" name="message" id="comment-body" placeholder="你的留言" class="form-control input-lg"></textarea>

                            <div class="buttons clearfix">
                                <button type="submit" class="btn btn-xlarge btn-clean-one">提交</button>
                            </div>
                        </form>
                    </aside>
                </div>
                <aside class="col-md-4 blog-aside">

                    <!-- <div class="aside-widget">
            <header>
              <h3>Featured Post</h3>
            </header>
            <div class="body">
              <ul class="clean-list">
                <li>
                  <a href="">Clean - Responsive HTML5 Template</a>
                </li>
                <li>
                  <a href="">Responsive Pricing Table</a>
                </li>
                <li>
                  <a href="">Yellow HTML5 Template</a>
                </li>
                <li>
                  <a href="">Blackor Responsive Theme</a>
                </li>
                <li>
                  <a href="">Portfolio Bootstrap Template</a>
                </li>
                <li>
                  <a href="">Clean Slider Template</a>
                </li>
              </ul>
            </div>
          </div> -->

                    <!-- <div class="aside-widget">
                        <header>
                            <h3>最新文章</h3>
                        </header>
                        <div class="body">
                            <ul class="clean-list">
                                <li>
                                    <a href="">Blackor Responsive Theme</a>
                                </li>
                                <li>
                                    <a href="">Portfolio Bootstrap Template</a>
                                </li>
                                <li>
                                    <a href="">Clean Slider Template</a>
                                </li>
                                <li>
                                    <a href="">Clean - Responsive HTML5 Template</a>
                                </li>
                                <li>
                                    <a href="">Responsive Pricing Table</a>
                                </li>
                                <li>
                                    <a href="">Yellow HTML5 Template</a>
                                </li>
                            </ul>
                        </div>
                    </div> -->

                    <div class="aside-widget">
                            <header>
                                <h3>标签</h3>
                            </header>
                            <div class="body clearfix">
                                <ul class="tags">
                                    <li>
                                        <a (click)="getArticles()">全部</a>
                                    </li>
                                    <li *ngFor="let item of tags">
                                        <a (click)="getArticleBy(item.id)">{{item.name}}</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                </aside>
            </div>
        </div>
    </div>
</div>
